<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NCheckbox,
  NInput,
  NTag,
  useMessage,
  NFlex,
  NAvatar, NSelect, NInputNumber, NUpload, NTreeSelect,useDialog
} from 'naive-ui'

import api from '@/api'
const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const dialog = useDialog();
import default_image from "@/assets/images/mz.jpg"
import Info from '@/views/customer/user/info.vue'
import { CheckmarkCircle } from '@vicons/ionicons5'
import AppPage from "@/components/page/AppPage.vue";
import {getToken} from "@/utils";
import { debounce } from 'lodash';

const data = reactive({
  value: 0,
  customers:[],
  token: getToken(),
  search_customer:'',
  goods:[],
  search_goods:'',
  select_customer:{
    id:0,
    name:"暂未选择",
    phone:"x",
    money_deposit:0
  },
  select_skus:[],
  select_buckling_skus:[],
  select_price:0,
  select_goods:[],
  select_goods_nums:[],
  yue:0,
  coupons:[],
  select_coupons:[],
  select_space:0,
  desc:"",
  is_deposit:0,
  show_info:false,
  page:1,
  option_space:[{ value: '' }],
  active:false,
  search_buckling_goods:'',
  bucking_goods:[],
  uploadAction: base_path+'api/appointment/project/file',
  e_sign:'',
  other_form:[],
  before_pic:[],
  after_pic:[],
  select_designers:[],
  select_buckling_space:0,
  payForm: {
    id: 0,
    order_id: 0,
    pay_type: 3,
    images: [],
    images_pc: [],
    fkfs: [],
    money: 0,
  },
  pay_way:[
    {
      name:'团购'
    },
    {
      name:'大众'
    },
    {
      name:'抖音'
    },
    {
      name:'现金'
    },
    {
      name:'微信'
    },
    {
      name:'支付宝'
    },
  ],
  brandOption:[],
  search_category_id:null,
  select_pay_designer:''
});


onMounted(() => {
  api.getSpaceList().then((res) => {
    data.option_space = res.data
    data.select_space = data.option_space[0].value
    data.select_buckling_space = data.option_space[0].value
  })
  api.getgoodsCategoryTree().then((res) => (data.brandOption = res.data))

  get_customers()
  get_goods()
  get_designers()
})
function go_pay() {
  api.on_batPay({
    id: data.detail.id,
    money: data.detail.pay_money
  }).then((res) => {
    data.pay = true
    data.pay_data = res.data
    data.payForm.id = res.data.water_id
    data.payForm.order_id = res.data.order_id
    data.payForm.money = res.data.money
    data.payForm.images = []
  })
}
function activate(){
  get_buckling_goods()
  data.active = true
}

function get_designers(){
  api.getSettingDesigner().then((res) => {
    data.designers = res.data
    data.select_pay_designer = res.data[0].id
  })
}

function show_info(item){
  data.show_info = true
  data.select_customer = item
  get_customer_detail()
}

function select_customer(item){
  // data.show_info = true
  data.select_customer = item
  get_customer_detail()
  const role_id = data.select_customer.role_id
  data.select_skus = []
  data.select_price = 0
  data.goods.map(item => {
    item.sku.map(item_sku => {
      if(item_sku.select_nums>0){
        // message.success('已选择商品:'+item.name)
        data.select_price+=item_sku.select_nums*item_sku.sku_level[role_id]
        data.select_skus.push(
            {
              "sku_id":item_sku.id,
              "sku_name":item_sku.sku_name,
              "num":item_sku.select_nums,
              "goods_name":item.name,
            }
        )
      }
    })
  });
  message.success('已选择客户:'+item.name)

}

const customRequestMethod1 = (options) => {
  console.log(options, 'options');

  const { file } = options.file;
  const formData = new FormData();
  formData.append('file', file);
  fetch(data.uploadAction, {
    method: 'POST',
    headers: options.headers,
    body: formData,
  })
      .then((response) => response.json())
      .then((ret) => {
        if (ret.code === 200) {
          data.e_sign = ret.data.url
          message.success('签名上传成功');
          options.onProgress(ret);
        } else {
          message.error(ret.msg);
        }
      })
}

function on_buckling_save(){
  if(!data.select_customer.id){
    message.error('请先选择客户')
    return
  }

  if(data.select_buckling_skus.length===0){
    message.error('请先选择划扣项目')
    return
  }

  api.createCases({
    add_uid:0,
    user_id:data.select_customer.id,
    space_id:data.select_buckling_space,
    desc:data.desc,
    designer_ids:data.select_designers,
    buckling_data:data.select_buckling_skus,
    e_sign:data.e_sign,
    other_form:data.other_form,
    before_pic:data.before_pic,
    after_pic:data.after_pic,
  }).then(() => {
    message.success("划扣成功")
    get_designers()
    get_buckling_goods()
  })
}

function get_customers(){
  api.getSaasUserList({
    name:data.search_customer
  }).then((res) => {
    data.customers = res.data
    data.select_customer = res.data[0]
  })
}

function get_goods(){
  api.getgoodsGood({
    page:data.page,
    page_size:1000,
    name:data.search_goods
  }).then((res) => {
      if (!res.data.length>0){
        return false
      }
      data.goods.push(...res.data)
  })
}

function get_buckling_goods(){
  api.getSaasBucklingList({
    name:data.search_buckling_goods,
    user_id:data.select_customer.id,
    page:1,
    page_size:1000
  }).then((res) => (data.bucking_goods = res.data))
}

const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}

// function search_goods(){
//   data.page = 1
//   api.getgoodsGood({
//     page:data.page,
//     page_size:1000,
//     name:data.search_goods
//   }).then((res) => {
//       console.log(res)
//       if (!res.data.length>0){
//         return false
//       }
//       data.goods = res.data
//   })
// }

// 计算属性：返回过滤后的商品列表
const filteredGoods = computed(() => {
  return data.goods.filter(item => {
    const nameMatch = data.search_goods
      ? item.name.includes(data.search_goods)
      : true;
    const categoryMatch = data.search_category_id
      ? item.category_id === data.search_category_id
      : true;
    return nameMatch && categoryMatch;
  });
});




const handleLoad = () => {
  data.page += 1
  get_goods()
}

function get_customer_detail(){
  api.getSaasUserDetail({
    id:data.select_customer.id
  }).then((res) => {
    data.select_customer = res.data
  })

  data.select_coupons = []
  api.getSaasUserCouponsList({
    user_id:data.select_customer.id
  }).then((res) => (data.coupons = res.data))
}
function handleChange(value, index1, index2){
  data.select_skus = []//选中的商品规则和数量
  data.select_price = 0
  // data.goods[index1].sku[index2].select_nums = value;
  const role_id = data.select_customer.role_id

  data.goods.map(item => {
    item.sku.map(item_sku => {
      if(item_sku.select_nums>0){
        // message.success('已选择商品:'+item.name)
        data.select_price+=item_sku.select_nums*item_sku.sku_level[role_id]
        data.select_skus.push(
            {
              "sku_id":item_sku.id,
              "sku_name":item_sku.sku_name,
              "num":item_sku.select_nums,
              "goods_name":item.name,
            }
        )
      }
    })

  });
}

function handleBucklingChange(value, index,i,b){
  data.select_buckling_skus = []//选中的商品规则和数量
  data.bucking_goods[index]['groups'][i]['buckling_item'][b].select_nums = value;
  data.bucking_goods.map(item1 => {
    item1.groups.map(item2 => {
      item2.buckling_item.map(
          item => {
            if(item.select_nums>0){
              let group_id = item2.group_id
              data.select_buckling_skus.push(
                  {
                    "id":item.id,
                    "buckling_id":item.id,
                    "sku_name":item.sku_name,
                    "nums":item.select_nums,
                    "goods_name":item.good_name,
                    "group_id":group_id?group_id:0,
                  }
              )
            }
          }
      )
    })
  })
}

function handleNumsChange(value, index,i,b){
  let buckling = data.bucking_goods[index]['groups'][i]['buckling_item'][b]
  dialog.warning({
    title: '警告',
    content: '你确定修改划扣数量为'+value+'次吗',
    positiveText: '确定',
    negativeText: '取消',
    draggable: true,
    onPositiveClick: () => {
        api.updateBucklingNums({
          buckling_id:buckling.id,
          nums:value,
        }).then((res) => {
          message.success("修改成功")
        })
    },
    onNegativeClick: () => {

    }
  })

}
let saveTimeout = null;
function on_save(){
  if(!data.select_customer.id){
    message.error('请先选择客户')
    return
  }
  if(data.select_skus.length===0){
    message.error('请先选择购买商品数量')
    return
  }
  // let totalPrice = data.payForm.fkfs.reduce((sum, item) => sum + item.price, 0);
  // if (data.payForm.fkfs.length === 0 && !data.is_deposit){
  //   message.error('请选择收款方式')
  // }
  data.b_loading = true
  api.createPay({
    user_id:data.select_customer.id,
    address_id:data.select_space,
    remark:data.desc,
    pay_designer: data.select_pay_designer,
    coupons:data.select_coupons,
    sku:data.select_skus,
    is_deposit:data.is_deposit,
    fkfs:data.payForm.fkfs
  }).then((res) => {
    message.success(res.msg)
    get_customer_detail()
  })
  api.getSaasBucklingList({
    name:data.search_buckling_goods,
    user_id:data.select_customer.id,
    buckling_type:1,
    page:1,
    page_size:1000
  }).then((res) => {
    data.bucking_goods = res.data
  })
  setTimeout(() => {
    data.b_loading = false
  }, 1000);
}


const onCreate_gg2 = () => {
  return {
    fkfs: '',
    price: 0,
  }
}

</script>

<template>
  <AppPage :show-footer="false" style="padding-top: 60px;">
    <n-grid :cols="3" :x-gap="12" :y-gap="8">
      <n-gi>
        <n-card  style="height: calc(100vh - 100px);"  content-style="padding: 0px;"   title="客户选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }" >
          <div style="margin:20px">
            <NInput v-model:value="data.search_customer" size="large" clearable type="text" placeholder="请输入姓名/手机号"
                    @keyup.enter="get_customers()" />
          </div>
          <n-scrollbar style="max-height: calc(100vh - 250px);padding:0 20px 20px 20px;">
            <n-card embedded  :class="['customer_card', { 'selected-card': item.id === data.select_customer.id }]"  @click="select_customer(item)"  v-for="item in data.customers" hover:card-shadow   size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }"
            >
              <template #header>
                <div style="display: flex; align-items: center;" >
                  <NAvatar :src="item.avatar" :fallbackSrc="default_image" style="width: 30px; height: 30px; margin-right: 10px;border-radius: 50%" @click="show_info(item)"/>
                  <span :class="[item.id === data.select_customer.id ? 'f2' : 'f1']">{{ item.name }}</span>
                </div>
              </template>
              <template #header-extra>
                <n-tag v-show="item.id === data.select_customer.id " round :class="[item.id === data.select_customer.id ? 'f2' : 'f1']" :bordered="false" type="warning">
                  已选择
                  <template #icon>
                    <n-icon :component="CheckmarkCircle" />
                  </template>
                </n-tag>
                <n-button strong secondary :class="[item.id === data.select_customer.id ? 'f2' : 'f1']" >{{item.role_name}}</n-button>

              </template>
              <template #footer>
                <span color="#ef504e"></span>
                <n-flex justify="space-between" size="large">
                  <div>卡号: <span>{{item.card_no}}</span> </div>
                  <div>储值金: <span>{{item.money_deposit}}</span> </div>
                  <div>电话: <span>{{item.phone}}</span></div>
                </n-flex>
              </template>
            </n-card>
          </n-scrollbar>
        </n-card>
      </n-gi>

      <n-gi>
        <n-card  style="height: calc(100vh - 100px);" content-style="padding: 0px;"   title="商品选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <div style="margin:20px;display: flex">

            <NTreeSelect
                v-model:value="data.search_category_id"
                :options="data.brandOption"
                clearable
                key-field="id"
                label-field="name"
                default-expand-all
                placeholder="请选商品类目"
            />&nbsp;
            <NInput v-model:value="data.search_goods" size="medium" clearable type="text" placeholder="请输入商品名称"/>

          </div>
          <n-infinite-scroll style="max-height: calc(100vh - 250px);padding:0 20px 20px 20px" @load="handleLoad">
            <n-card embedded  v-for="(item,index1) in filteredGoods" class="customer_card" hover:card-shadow  size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
              <template #header-extra>
                <NTag style="width: 100px" size="large">库存:{{item.kc}}</NTag>
              </template>
              <template #header>
                <div style="display: flex; align-items: center;">
                  <NAvatar :src="item.cover" :fallbackSrc="default_image" style="width: 40px; height: 40px; margin-right: 10px;" />
                  <div>
                    <div style="font-size: 12px;color: #747586;margin-left: 0px;">{{ item.lm }}</div>
                    <div style="font-size: 14px">{{ item.name }}</div>
                  </div>

                </div>
              </template>
              <template #footer>

                <n-flex v-for="(sku_item,index2) in item.sku" justify="space-between" size="large" style="width:100%;height:40px;line-height:40px;margin-bottom:5px">
                  <div>规格: <span>{{sku_item.sku_name}}(¥{{sku_item.sku_level[1]}})</span> </div>
                  <div> <n-input-number min="0" style="width: 100px" v-model:value="sku_item.select_nums" @update:value="(value) => handleChange(value, index1, index2)"/></div>
                </n-flex>


              </template>
            </n-card>
          </n-infinite-scroll>
        </n-card>
      </n-gi>

      <n-gi>
        <n-card  content-style="padding: 20px;"   title="收银台" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <n-alert :title="'客户:'+data.select_customer.name+'('+data.select_customer.phone+')'" type="success">
            <div v-for="item in data.select_skus">{{item.good_name}}({{item.sku_name}})x{{item.num}} </div>
            <div>
              合计金额:¥{{data.select_price}}
            </div>
          </n-alert>

          <n-card class="customer_card" style="margin-top: 10px" :title="'可用余额(¥'+data.select_customer.money_deposit+')'" size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
            <template #header-extra>
              <n-radio-group
                  v-model:value="data.is_deposit"
                  name="radiogroup"
                  :default-value="0"
                  v-if="data.select_customer.money_deposit>0"
              >
                <n-space>
                  <n-radio  key=0 :value=0>
                    否
                  </n-radio>
                  <n-radio  key=1  :value=1>
                    是
                  </n-radio>
                </n-space>
              </n-radio-group>
            </template>

          </n-card>
          <n-card class="customer_card"  title="优惠券支付" size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
            <template #footer>
              <n-scrollbar v-if="data.coupons.length > 0" style="max-height:130px;padding-right:30px">
                <n-checkbox-group v-model:value="data.select_coupons">
                  <n-card embedded  v-for="item in data.coupons" class="customer_card" hover:card-shadow  size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">

                    <template #footer>
                      <n-flex justify="space-between" size="small" style="width:100%;margin-bottom:5px">
                        <div><n-checkbox size="large" :label="item.type_name+'[¥'+item.coupons_price+']'" :value="item.id"/> </div>
                      </n-flex>

                    </template>
                  </n-card>

                </n-checkbox-group>

              </n-scrollbar>
              <div v-else>暂无优惠券</div>
            </template>
          </n-card>

          <n-layout style="margin-top: 20px">
            <n-layout-header>
              <n-flex >
                <n-tag size="large" style="width:200px"> 选择收款方式 </n-tag>
                <n-tag size="large" style="width: 120px"> 收款金额 </n-tag>
              </n-flex>
            </n-layout-header>
            <n-layout-content content-style="padding: 10px 0;"  >
              <n-dynamic-input v-model:value="data.payForm.fkfs" :on-create="onCreate_gg2">
                <template #default="{ value }">
                  <n-flex justify="space-between">
                    <NSelect
                        v-model:value="value.fkfs"
                        :options="data.pay_way"
                        placeholder="选择收款方式"
                        filterable
                        label-field="name"
                        value-field="name"
                        style="width: 200px"
                    />
                    <n-input-number  v-model:value="value.price" style="width: 120px" />
                  </n-flex>
                </template>
              </n-dynamic-input>
            </n-layout-content>
          </n-layout>
          <div style="display: flex; align-items: center; gap: 10px;margin-bottom:10px;">
            <n-tag size="large" style="width:200px; flex-shrink: 0;">选择收银员工</n-tag>
            <NSelect
              :options="data.designers"
              clearable
              placeholder="选择收银员工"
              label-field="name"
              value-field="id"
              v-model:value="data.select_pay_designer"
            />
          </div>
          <div style="display: flex; align-items: center; gap: 10px;margin: 10px 0">
            <n-tag size="large" style="width:200px; flex-shrink: 0;">选择所属门店</n-tag>
            <NSelect
              style="width: 100%;"
              :options="data.option_space"
              clearable
              placeholder="请选结算门店"
              v-model:value="data.select_space"
            />
          </div>
          <n-input button-placement="both" style="width: 100%;margin-bottom:10px;" size="large" v-model:value="data.desc" placeholder="备注"/>


          <n-button type="primary" :loading="data.b_loading" style="float:right" @click="on_save">
            线下收款并开单
          </n-button>
          <n-button @click="activate()" type="error">
            直接划扣
          </n-button>

        </n-card>
      </n-gi>
    </n-grid>

    <n-drawer v-model:show="data.show_info" width="50%" placement="right">
      <Info :info-data="data.select_customer"/>
    </n-drawer>

    <n-drawer v-model:show="data.active" :width="1400" placement="right">
      <n-card title="项目划扣"  style="height: calc(100vh - 100px);" content-style="padding: 0px;" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
        <n-grid :cols="2" :x-gap="12">
            <n-gi :span="1">
              <n-card style="height: 880px;width: 680px;margin: 5px" content-style="padding: 0px;" title="疗程项目选择" size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
                <div style="margin:20px">
                  <NInput v-model:value="data.search_buckling_goods" size="large" clearable type="text" placeholder="请输入商品名称"
                          @keyup.enter="get_buckling_goods()" />
                </div>
                <n-scrollbar v-if="data.bucking_goods.length>0" style="max-height: calc(100vh - 150px);padding:0 20px 20px 20px">
                  <n-card embedded v-for="(item,index) in data.bucking_goods" class="customer_card" hover:card-shadow  size="small" :segmented="{
                      content: true,
                      footer: 'soft',
                    }">

                    <template #header>
                      <div style="display: flex; align-items: center;">
                        <NAvatar :src="item.goods_cover" :fallbackSrc="default_image" style="width: 40px; height: 40px; margin-right: 10px;" />
                        <div style="height:40px;line-height:20px">{{ item.goods_name }}<br><span style="font-size: 12px;color:#747586">{{ item.created_at }}</span></div>
                      </div>
                    </template>
                    <!--              项目划扣选择-->
                    <template v-if="item.type===1 && item.status===1" #footer>
                      <div >
                        <div v-for="(group,i) in item['groups']">
                          <div v-for="(buck,b) in group['buckling_item']"  style="margin-bottom: 8px;display: flex;">
                            <div style="flex: 2; ">
                              <div>{{buck['good_name']}}{{buck['sku_name']}}</div>
                            </div>
                            <div style="flex: 1; display: flex; flex-direction: column;">
                              <div style="margin-left: 95px">
                                可使用<n-input
                                  size="tiny"
                                  style="width: 30px"
                                  v-model:value="buck.last_nums"
                                  @keyup.enter="(e) => handleNumsChange(e.target.value, index, i, b)"
                                />次
                              </div>
                              <div>
                                <n-input-number placeholder="划扣次数" style="width: 120px;margin-top: 10px;float: right"  v-model:value=buck.select_nums @update:value="(value) => handleBucklingChange(value,index,i,b)" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                    <n-collapse v-if="item.type===2 && item.status===1" justify="space-between" size="large" >
                      <n-collapse-item :title="group['group_name']" v-for="(group,i) in item['groups']">
                        <template #header-extra>
                          <div v-if="group['group_name']">
                            <!--                        <span v-if="group['group_type']===1">单次可用{{group.times}}次</span>-->
                            <span v-if="group['group_type']===2">合计可用{{group.times}}次</span>
                            <span v-if="group['group_type']===3">时段{{group.times}}次</span>
                          </div>
                        </template>
                        <div v-for="(buck,b) in group['buckling_item']"  style="margin-bottom: 8px;display: flex;">
                          <div style="flex: 2; ">{{buck['good_name']}}({{buck['sku_name']}})</div>
                          <div style="flex: 1; display: flex; flex-direction: column;" v-if="group['group_type']===1">
                            <div style="margin-left: 95px">
                              可使用<n-input
                                size="tiny"
                                style="width: 30px"
                                v-model:value="buck.last_nums"
                                @keyup.enter="(e) => handleNumsChange(e.target.value, index, i, b)"
                              />次
                            </div>
                            <div>
                              <n-input-number placeholder="划扣次数" style="width: 120px;margin-top: 10px;float: right"  v-model:value=buck.select_nums @update:value="(value) => handleBucklingChange(value,index,i,b)" />
                            </div>

                          </div>

                        </div>
                      </n-collapse-item>
                    </n-collapse>
                  </n-card>
                </n-scrollbar>
                <n-empty description="该客户暂无疗程卡" v-else style="margin-top: 50px"></n-empty>
              </n-card>
            </n-gi>
            <n-gi :span="1">
              <n-card style="height: 880px;width: 680px;margin: 5px" content-style="padding: 0px;" title="其它" size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
                <div style="height: 8vh;margin: 20px">
                  <label>技师选择</label>
                  <n-scrollbar v-if="data.designers.length>0" style="max-height:250px;padding-top: 10px">
                    <n-select v-model:value="data.select_designers" multiple :options="data.designers" />
                  </n-scrollbar>
                  <n-empty description="暂无技师" v-else style="margin-top: 50px"></n-empty>
                </div>
                <n-divider />
                <div style="height: 8vh;margin: 20px">
                  <label>门店选择</label>
                  <NSelect
                      style="width: 100%;margin-bottom:10px;margin-top: 10px"
                      :options="data.option_space"
                      clearable
                      placeholder="请选结算门店"
                      v-model:value="data.select_buckling_space"
                  />
                </div>
                <n-divider />
                <div style="height: 8vh;margin: 20px">
                  <n-input button-placement="both" style="width: 100%;margin-bottom:10px;" v-model:value="data.desc" size="large" placeholder="备注"/>
                </div>
                <n-button type="primary" style="float: right;margin: 20px"  @click="on_buckling_save">
                  执行划扣
                </n-button>
              </n-card>

            </n-gi>
          </n-grid>
      </n-card>
    </n-drawer>
  </AppPage>
</template>

<style>
.customer_card{
  color: #000000;
  font-size: 14px;
  font-weight: bolder;
  margin: 10px 2%;
  width: 95%;
  transition: all 0.3s ease; /* 添加过渡动画 */
}

.selected-card {
  color: #eeeeee!important;
  background: linear-gradient(135deg, rgba(217, 91, 116, 0.85), rgba(137, 69, 195, 0.95)) !important;
  backdrop-filter: blur(4px) saturate(160%);
  -webkit-backdrop-filter: blur(4px) saturate(160%);

  border-radius: 8px !important; /* 增强圆角 */

  box-shadow:
    0 3px 12px rgba(76, 110, 245, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);

  transform: scale(1.005); /* 更微妙的放大效果 */
  transition:
    background 0.4s ease,
    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.15);
}
.customer_card:hover:not(.selected-card) {
  border-color: #ced4da !important;
  transform: translateY(-1px);
}

.f1{
  color: #000000;
  font-size: 14px;
  font-weight: bolder;
}
.f2{
  color: #eeeeee!important;
  font-size: 14px;
  font-weight: bolder;
}

</style>
